import React from 'react'
import { Layout, Menu,Dropdown,Icon,Avatar, message } from 'antd';
import { withRouter } from "react-router-dom"
// import { UserOutlined, LaptopOutlined, NotificationOutlined } from '@ant-design/icons';

import { adminRoutes } from "../../routes";
import "./frame.css";
import {clearToken}from "../../utils/auth"
const { Header, Content, Sider } = Layout;

const routes = adminRoutes.filter(route => route.isshow)


function index(props) { 
    const popMenu=(<Menu onClick={(p)=>{
        if(p.key==="logout"){
            clearToken()
            props.history.push("/Login")
        }else{
            message.info(p.key)//tip提示
        }
    }}>
        <Menu.Item key="noti">通知中心</Menu.Item>
        <Menu.Item key="setting">设置</Menu.Item>
       <Menu.Item key="logout">退出</Menu.Item>
       </Menu>)
    return (
        <Layout>
            <Header className="header" style={{
                backgroundColor: "skyblue"
            }}>
                <div className="logo" />
                <Dropdown overlay={popMenu}>
                 <div>
                     <Avatar>U</Avatar>
                     <span style={{color:"white"}}>管理员</span> 
                     <Icon type="down" />
                 </div>
               
                </Dropdown>

            </Header>
            <Layout>
                <Sider width={200} className="site-layout-background">
                    <Menu
                        mode="inline"
                        defaultSelectedKeys={['1']}
                        defaultOpenKeys={['sub1']}
                        style={{ height: '100%', borderRight: 0 }}
                    >
                        {routes.map(route => {
                            return (
                                <Menu.Item key={route.path} onClick={p => props.history.push(p.key)}>
                                    {route.title}
                                </Menu.Item>
                            )
                        })}
                    </Menu>
                </Sider>
                <Layout style={{ padding: '16px' }}>
                    {/* <Breadcrumb style={{ margin: '16px 0' }}>
                        <Breadcrumb.Item>Home</Breadcrumb.Item>
                        <Breadcrumb.Item>List</Breadcrumb.Item>
                        <Breadcrumb.Item>App</Breadcrumb.Item>
                    </Breadcrumb> */}
                    <Content
                        className="site-layout-background"
                        style={{
                            padding: 24,
                            margin: 0,
                            minHeight: 280,
                        }}
                    >
                        {props.children}
                    </Content>
                </Layout>
            </Layout>
        </Layout>
    )
}

export default withRouter(index)
